<template>
	<header class="header-navigation" id="header">
		<nav>
			<div class="logo"><a href="http://www.lzdncloud.top">张林个人博客</a></div>
			<h2 id="mnavh"><span class="navicon"></span></h2>
			<ul id="starlist">
			<li><router-link to="/" replace>首页</router-link></li>
				<li><router-link to="/about">关于我</router-link></li>
				<li><router-link to="/photo">私密相册</router-link></li>
				<li><router-link to="/diary">博客日记</router-link></li>
				<li><router-link to="/study">学海无涯</router-link></li>
				<li><router-link to="/heart">心路历程</router-link></li> 
			</ul>
			<div class="searchbox">
				<div id="search_bar" class="search_bar">
					<form id="searchform" action="[!--news.url--]e/search/index.php" method="post" name="searchform">
						<input class="input" placeholder="想搜点什么呢.." type="text" name="keyboard" id="keyboard">
						<input type="hidden" name="show" value="title" />
						<input type="hidden" name="tempid" value="1" />
						<input type="hidden" name="tbname" value="news">
						<input type="hidden" name="Submit" value="搜索" />
						<p class="search_ico"> <span></span></p>
					</form>
				</div>
			</div>
		</nav>
	</header>
</template>
<script>
export default {
    name:'MyHeader',
	template:'<MyHeader/>',
	mounted(){
		this.initBanner();
	},
	methods:{
		initBanner:function(){
			//banner
			$('#banner').easyFader();
			
			//nav
			var oH2 = document.getElementById("mnavh"); 
			var oUl = document.getElementById("starlist");  
			oH2.onclick = function ()
			{
			var style = oUl.style;
			style.display = style.display == "block" ? "none" : "block";
			oH2.className = style.display == "block" ? "open" : ""
			}
			
			var obj=null;
			var As=document.getElementById('starlist').getElementsByTagName('a');
			obj = As[0];
			for(var i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
			obj=As[i];}
			obj.id='selected';
			 
			//search
			$('.search_ico').click(function () {
				$('.search_bar').toggleClass('search_open');
				if ($('#keyboard').val().length > 2) {
					$('#keyboard').val('');
					$('#searchform').submit();
				} else {
					return false;
				}
			});

			//header
			var new_scroll_position = 0;
			var last_scroll_position;
			var header = document.getElementById("header");
		
			window.addEventListener('scroll', function(e) {
			last_scroll_position = window.scrollY;
		
			if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
			header.classList.remove("slideDown");
			header.classList.add("slideUp");
		
			} else if (new_scroll_position > last_scroll_position) {
			header.classList.remove("slideUp");
			header.classList.add("slideDown");
			}
		
			new_scroll_position = last_scroll_position;
			});
		}
	}
}
</script>
